<template>
  <div class="sub-card-home">
    <el-radio-group v-model="radio1" size="small" @change="reload">
      <el-radio-button label="面积"/>
      <el-radio-button label="数量"/>
    </el-radio-group>
    <div ref="chart" id="sub-right1" style="width: 100%;height:250px" v-if="radio1 === '面积'"/>
    <div ref="chart" id="sub-right2" style="width: 100%;height:250px" v-if="radio1 === '数量'"/>
  </div>
</template>

<script lang="ts">
// import {createComponent} from 'echarts-for-vue';
import * as echarts from 'echarts';
import {h, getCurrentInstance, onMounted, ref} from 'vue';
import {defineComponent, reactive} from "vue";
import Data from "../../../../../../public/config/data.json";

export default defineComponent({
  name: "leixingfenbu",
  props: ['index'],
  setup(props) {
    const instance = getCurrentInstance();
    const api = instance?.appContext.config.globalProperties.api;
    let myChart = null
    let myChart1 = null
    //数据源
    const {appContext} = getCurrentInstance();
    let data = reactive(Data).townModel
    let data1 = reactive(Data).townModel
    const radio1 = ref('面积')
    const reload = () => {
      appContext.config.globalProperties.axios.post(`api/strandLand/sum`)
          .then((response) => {
            response.data.forEach(item => {
              if(item.name === '港区(浮桥镇)')
              {
                data[0].value = item.value
                data1[0].value = item.area
              }else if(item.name === '高新区')
              {
                data[1].value = item.value
                data1[1].value = item.area
              }else if(item.name === '城厢镇')
              {
                data[2].value = item.value
                data1[2].value = item.area
              }else if(item.name === '沙溪镇')
              {
                data[3].value = item.value
                data1[3].value = item.area
              }else if(item.name === '浏河镇')
              {
                data[4].value = item.value
                data1[4].value = item.area
              }else if(item.name === '璜泾镇')
              {
                data[5].value = item.value
                data1[5].value = item.area
              }else if(item.name === '双凤镇')
              {
                data[6].value = item.value
                data1[6].value = item.area
              }
            })
          })
      setTimeout(() => {
        let chart = document.getElementById('sub-right1');
        myChart = echarts.init(chart);
        //饼图配置
        let option = {
          //图形配置
          series: [
            {
              type: "pie",
              data: data1,
              label: {
                color: "rgba(255, 255, 255, 0.85)",
                formatter: '{b}:{c}亩',
                fontFamily: "PingFang SC",
                align: "right",
                fontStyle: "normal",
                fontSize: 10,
                fontWeight: 400,
                width: 200,
              },
              color: ["#71A0FF", "#F5DF4C", "#FE7A92", "#64FFDA", "#BA68C8", "#72D572", "#FFB74D"],
              bottom: "40%",
              labelLine: {
                length: 5,
                lineStyle: {
                  color: "rgba(255, 255, 255, 0.2)",
                  type: "solid"
                }
              }
            },
          ],
          //图例配置
          legend: {
            data: data1,
            icon: 'rect',
            textStyle: {
              fontSize: 10,
              color: 'rgba(251, 247, 247, 1)'
            },
            bottom: "0%",
            width: "90%",
            itemGap: 15,
          },
        }
        myChart.setOption(option)
      }, 1000)
      setTimeout(() => {
        let chart1 = document.getElementById('sub-right2');
        myChart1 = echarts.init(chart1);
        //饼图配置
        let option1 = {
          //图形配置
          series: [
            {
              type: "pie",
              data: data,
              label: {
                color: "rgba(255, 255, 255, 0.85)",
                formatter: '{b}:{c}个',
                fontFamily: "PingFang SC",
                align: "right",
                fontStyle: "normal",
                fontSize: 10,
                fontWeight: 400,
                width: 200,
              },
              color: ["#71A0FF", "#F5DF4C", "#FE7A92", "#64FFDA", "#BA68C8", "#72D572", "#FFB74D"],
              bottom: "40%",
              right: "0%",
              labelLine: {
                length: 5,
                lineStyle: {
                  color: "rgba(255, 255, 255, 0.2)",
                  type: "solid"
                }
              }
            },
          ],
          //图例配置
          legend: {
            data: data,
            icon: 'rect',
            textStyle: {
              fontSize: 10,
              color: 'rgba(251, 247, 247, 1)'
            },
            bottom: "0%",
            width: "90%",
            itemGap: 15,
          },
        }
        myChart1.setOption(option1)
      }, 1000)
    }
    onMounted(() => {
      reload()
    })
    return {
      myChart,
      radio1,
      reload
    }
  }
})
</script>


<style scoped lang="scss">
.sub-card-home {
  color: #fff;

  .el-radio-group {
    margin-left: 74%;
    flex-wrap: nowrap;
  }
}

</style>

